<template>
  <view class="catalog-box">
    <ve-card title="名词解释">
      <view class="item-box">
        <view class="item" v-for="item in explainList" :key="item.value" @click="() => onClick(item, 1)">{{ item.label }}</view>
      </view>
    </ve-card>
    <ve-card title="功能说明">
      <view class="item-box">
        <view class="item" v-for="item in funcList" :key="item.value" @click="() => onClick(item, 2)">{{ item.label }}</view>
      </view>
    </ve-card>
  </view>
</template>

<script setup lang="ts">
  const explainList = [
    {
      value: 1,
      label: '费用总额',
    },
    {
      value: 2,
      label: '收款总额',
    },
    {
      value: 3,
      label: '付款总额',
    },
    {
      value: 4,
      label: 'OTA对账总额',
    },
    {
      value: 5,
      label: '佣金',
    },
    {
      value: 6,
      label: '待结算金额',
    },
    {
      value: 7,
      label: '结算中金额',
    },
    {
      value: 8,
      label: '已结算金额',
    },
    {
      value: 9,
      label: '总额',
    },
    {
      value: 10,
      label: '实结',
    },
    {
      value: 11,
      label: '未结',
    },
    {
      value: 12,
      label: '操作节点',
    },
    {
      value: 13,
      label: '无需结算',
    },
  ]
  const funcList = [
    {
      value: 1,
      label: '结算/批量结算',
    },
    {
      value: 2,
      label: '修改费用',
    },
    {
      value: 3,
      label: '删除费项',
    },
    {
      value: 4,
      label: '添加备注',
    },
    {
      value: 5,
      label: '通知',
    },
    {
      value: 6,
      label: '设置抽佣比例',
    },
    {
      value: 7,
      label: '三方支付账单',
    },
    {
      value: 8,
      label: '订单取消对于费用的影响',
    },
    {
      value: 9,
      label: '手动添加退款',
    },
  ]

  const onClick = (item: any, tabIndex: number) => {
    uni.$emit('onCatalogClick', { item, tabIndex })
    uni.navigateBack({
      delta: 1,
    })
  }
</script>

<style lang="less" scoped>
  page {
    background-color: #f7f8fa;
  }

  .catalog-box {
    padding: 24rpx 24rpx;

    .item-box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 24rpx 0;

      .item {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 117px;
        font-weight: 600;
        font-size: 13px;
        color: #1d2129;
        padding: 12px 15px;
        margin-bottom: 12px;
        background: #f3f7ff;
        border-radius: 2px 2px 2px 2px;
      }
    }
  }
</style>
